<template>
  <div>
    <HeaderComponent /> <!-- 顶部导航栏 -->

    <div id="BackLink">
      <router-link :to="`/catalog/${categoryId}`">
        Return to {{ product?.categoryName }}
      </router-link>
    </div>

    <div id="Catalog">
      <!-- 确保 product 存在后再渲染 -->
      <h2 v-if="product">{{ product.productName }}</h2>

      <table v-if="product">
        <thead>
          <tr>
            <th>Item ID</th>
            <th>Product ID</th>
            <th>Description</th>
            <th>List Price</th>
            <th>&nbsp;</th>
          </tr>
        </thead>
        <tbody>
          <tr @click="goToItem(product.productId)">
            <td>
              <router-link :to="`/item/${product.productId}`">{{ product.itemId }}</router-link>
            </td>
            <td>{{ product.productId }}</td>
            <td>
              <span>{{ product.attribute1 }}</span>
              <span>{{ product.attribute2 }}</span>
              <span>{{ product.attribute3 }}</span>
              <span>{{ product.attribute4 }}</span>
              <span>{{ product.attribute5 }}</span>
            </td>
            <td>{{ formatPrice(product.listPrice) }}</td>
            <td>
              <button @click.stop="addToCart(product.itemId)" class="Button">Add to Cart</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <FooterComponent /> <!-- 底部信息 -->
  </div>
</template>

<script setup>
import { getProductDetails, addItemToCart } from "@/api/product";
import { useRoute, useRouter } from "vue-router";
import { ref, onMounted } from "vue";
import "@/assets/css/global.css";
import HeaderComponent from '@/components/Header.vue';
import FooterComponent from '@/components/Footer.vue';

const route = useRoute();
const router = useRouter();

const categoryId = ref(route.params.categoryId);
const productId = ref(route.params.productId);
const product = ref(null);
const category = ref(null);
const itemList = ref([]);

// 获取商品详情
const fetchProductDetails = async () => {
  try {
    const response = await getProductDetails(categoryId.value, productId.value);
    product.value = response.data;
    console.log("Product details:", product.value);
  } catch (error) {
    console.error("Failed to fetch product details:", error);
  }
};

// 跳转到商品项详情页
const goToItem = (productId) => {
  console.log("Navigating to item with ID:", productId);
  router.push(`/item/${productId}`);
};

// 加入购物车
const addToCart = async (itemId) => {
  try {
    await addItemToCart(itemId);
    alert("Item added to cart!");
  } catch (error) {
    console.error("Failed to add item to cart:", error);
  }
};

// 格式化价格
const formatPrice = (price) => {
  return new Intl.NumberFormat("en-US", {
    style: "currency",
    currency: "USD",
  }).format(price);
};

onMounted(fetchProductDetails);
</script>
<style scoped>  
/* 按钮正常状态 */
Button, Button:link, Button:visited {
    padding: .3ex 1ex; /* 调整内边距 */
    color: #734012; /* 深棕色文字，与主色调一致 */
    background-color: #fccc1c; /* 亮黄色背景，与主色调一致 */
    text-decoration: none; /* 去掉下划线 */
    font-family: helvetica, tahoma, arial, verdana, sans-serif; /* 字体 */
    font-size: 1.5ex; /* 字体大小 */
    /* border: 2px solid #734012;深棕色边框 */
    border-radius: 6px; /* 圆角 */
    transition: all 0.3s ease; /* 平滑过渡效果 */
}

/* 按钮悬停状态 */
Button:hover {
    color: #fff; /* 白色文字 */
    background-color: #734012; /* 深棕色背景 */
    border-color: #734012; /* 保持深棕色边框 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
}

/* 按钮按下状态 */
Button:active {
    background-color: #b3741d; /* 较深的橙色背景 */
    color: #fff; /* 保持白色文字 */
    box-shadow: inset 0 4px 6px rgba(0, 0, 0, 0.3); /* 内嵌阴影，增加按压感 */
}
</style>